Ext.chloroform.ScenariosRowExpander = Ext.extend(Ext.ux.grid.NestingRowExpander, {
    /**
     * @cfg {Object} the main page selection listener
     */
    pageSelectionListener: null,

    openNewExtensionWindow: null,

    removeSelectedExtension: null,

    extensionMover: null,

    expandOnEnter : false,
    expandOnDblClick : false,

    actAsTree        : true,
    //treeLeafProperty : 'is_leaf',

    // temporary config
    projectModelUrl: null,

    tpl : new Ext.Template(
            '<div id="entry-row-expansion-{id}"></div>'
            ),

    listeners : {
        expand : function(exp, rec, body, rowIndex) {
            var applyToElemId = 'entry-row-expansion-' + rec.data.id;
            var scenarioGridId = "entry-extensions-" + rec.data.id;
            var expander = this;

            var nestedExpander = new Ext.chloroform.ScenariosRowExpander({
                projectModelUrl: this.projectModelUrl,
                pageSelectionListener: this.pageSelectionListener,
                openNewExtensionWindow: this.openNewExtensionWindow,
                removeSelectedExtension: this.removeSelectedExtension,
                extensionMover: this.extensionMover
            });


            var t = new Ext.TabPanel({
                title: 'Row Tabs',
                applyTo: applyToElemId,
                autoTabs:true,
                activeTab:0,
                deferredRender:false,
                border:false,
                items: [
                    new Ext.chloroform.ScenariosGrid({
                        id: scenarioGridId,
                        title: 'Extensions',
                        header: false,
                        projectModelUrl: this.projectModelUrl + rec.data.id,
                        pageSelectionListener: this.pageSelectionListener,
                        expander: nestedExpander,

                        tbar : [
                            {
                                text:'Add Extension',
                                tooltip:'Add a new extension',
                                iconCls:'add',
                                handler: function() {
                                    expander.openNewExtensionWindow(scenarioGridId, rec.data.id /*context entry id*/)
                                }
                            },
                            '-',
                            {
                                text:'Remove Extension',
                                tooltip:'Remove the selected extension',
                                iconCls:'remove',
                                handler: function() {
                                    expander.removeSelectedExtension(scenarioGridId);
                                }
                            },
                            '-',
                            {
                                //text:'Remove Extension',
                                tooltip:'Move the selected extension up',
                                iconCls:'up',
                                handler: function() {
                                    expander.extensionMover(scenarioGridId, -1);
                                }
                            },
                            {
                                //text:'Remove Extension',
                                tooltip:'Move the selected extension down',
                                iconCls:'down',
                                handler: function() {
                                    expander.extensionMover(scenarioGridId, 1);
                                }
                            }
                        ]

//                        expander: new Ext.chloroform.ScenariosRowExpander({
//                            projectModelUrl: projectModelUrl + 'ext?extPath=cp1'
//                        }),
                    }),
                    {
                        title: 'Editor',
                        html: '<p>Some settings in here.</p>'
                    },
                    {
                        title: 'Settings',
                        html: '<p>Some settings in here.</p>'
                    }
                ]
            });
        }
    }

//    init: function(grid) {
//        Ext.chloroform.ScenariosRowExpander.superclass.init.call(this, grid);
//        this.on("expand", function(exp, rec) {
//            var applyToElemId = 'entry-row-expansion-' + rec.data.id;
//            var scenarioGridId = "entry-extensions-" + rec.data.id;
//            var expander = this;
//
//            var nestedExpander = new Ext.chloroform.ScenariosRowExpander({
//                projectModelUrl: this.projectModelUrl,
//                pageSelectionListener: this.pageSelectionListener,
//                openNewExtensionWindow: this.openNewExtensionWindow,
//                removeSelectedExtension: this.removeSelectedExtension
//            });
//
//
//            var t = new Ext.TabPanel({
//                title: 'Row Tabs',
//                applyTo: applyToElemId,
//                autoTabs:true,
//                activeTab:0,
//                deferredRender:false,
//                border:false,
//                items: [
//                    new Ext.chloroform.ScenariosGrid({
//                        id: scenarioGridId,
//                        title: 'Extensions',
//                        header: false,
//                        projectModelUrl: this.projectModelUrl + rec.data.id,
//                        pageSelectionListener: this.pageSelectionListener,
//                        expander: nestedExpander,
//
//                        tbar : [
//                            {
//                                text:'Add Extension',
//                                tooltip:'Add a new extension',
//                                iconCls:'add',
//                                handler: function() {
//                                    expander.openNewExtensionWindow(scenarioGridId, rec.data.id /*context entry id*/)
//                                }
//                            },
//                            '-',
//                            {
//                                text:'Remove Extension',
//                                tooltip:'Remove the selected extension',
//                                iconCls:'remove',
//                                handler: function() {
//                                    expander.removeSelectedExtension(scenarioGridId);
//                                }
//                            }
//                        ]
//
////                        expander: new Ext.chloroform.ScenariosRowExpander({
////                            projectModelUrl: projectModelUrl + 'ext?extPath=cp1'
////                        }),
//                    }),
//                    {
//                        title: 'Editor',
//                        html: '<p>Some settings in here.</p>'
//                    },
//                    {
//                        title: 'Settings',
//                        html: '<p>Some settings in here.</p>'
//                    }
//                ]
//            });
//        });
//
//    }

});